<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>User Management</title>

    <script src="../../element/vue.js"></script>

    <script src="../../js/axios.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">


</head>
    <div id="app">
        <h2 style="text-align: center;">用户管理</h2>

        <form @submit.prevent="queryUser" class="container mt-4">
  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <label for="account">Account:</label>
        <input type="text" id="account" class="form-control form-control-sm" v-model="account">
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <label for="phone">Phone:</label>
        <input type="text" id="phone" class="form-control form-control-sm" v-model="phone">
      </div>
    </div>
    
    <div class="col-md-2">
      <div class="form-group">
        <label for="queryType">Query Type:</label>
        <select id="queryType" class="form-select form-select-sm" v-model="queryType">
          <option value="0">查询用户</option>
          <option value="1">查询管理员</option>
        </select>
      </div>
    </div>
    
    <div class="col-md-2">
      <div class="form-group">
        <label for="queryStatus">Query Status:</label>
        <select id="queryStatus" class="form-select form-select-sm" v-model="queryStatus">
          <option value="0">所有用户</option>
          <option value="1">异常状态用户</option>
        </select>
      </div>
    </div>
    
    <div class="col-md-2">
      <div class="form-group">
        <label for="querySort">Query Sort:</label>
        <select id="querySort" class="form-select form-select-sm" v-model="querySort">
          <option value="0">用户ID正向排序</option>
          <option value="1">用户ID逆向排序</option>
          <option value="2">慈善积分正向排序</option>
          <option value="3">慈善积分逆向排序</option>
        </select>
      </div>
    </div>
  </div>
  
  <button type="submit" class="btn btn-primary">查询</button>
</form>

          
          
          

        <table v-if="users.length > 0" class="table">
    <thead>
        <tr>
            <th>用户Id</th>
            <th>账号</th>
            <th>名字</th>
            <th>年龄</th>
            <th>手机</th>
            <th>慈善积分</th>
            <th>用户级别</th>
            <th>用户状态</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="user in users" :key="user.userId">
            <td>{{ user.userId }}</td>
            <td>{{ user.account }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.age }}</td>
            <td>{{ user.phone }}</td>
            <td>{{ user.charitableScore }}</td>
            <td>{{ user.userRole }}</td>
            <td :style="{'color': user.loginFailTimes < 8 ? 'green' : 'red'}">
                {{ user.loginFailTimes < 8 ? '正常' : '异常' }}
            </td>
            <td>

                <button v-if="user.loginFailTimes < 8" class="btn btn-success btn-block" @click="updateUserStatus(user.userId)">封锁用户</button>
                <button v-if="user.loginFailTimes >= 8" class="btn btn-warning btn-block" @click="updateUserStatus(user.userId)">解封用户</button>
                <button class="btn btn-danger btn-block" @click="deleteUser(user.userId)">删除用户</button>
                <button v-if="user.userRole === 0" class="btn btn-primary btn-block" @click="changeUserRole(user.userId)">添加管理员</button>
                <button v-if="user.userRole === 1" class="btn btn-secondary btn-block" @click="changeUserRole(user.userId)">移除管理员</button>
            </td>            
        </tr>
    </tbody>
</table>

        
        <p v-else>No users found.</p>
    </div>

    <script>

    var operatorId = localStorage.getItem('userId')
    new Vue({
        el: '#app',
        data: {
            account: '',
            phone: '',
            queryType: 0,
            queryStatus: 0,
            querySort: 0,
            users: []
        },

    created() {
        this.queryUser(); // 在页面加载时执行一次查询
    },
    methods: {
        queryUser() {
            // Make API request to query users
            axios.post('http://localhost:8888/api/users/queryUser', {
                account: this.account,
                phone: this.phone,
                queryType: this.queryType,
                queryStatus: this.queryStatus,
                querySort: this.querySort
            })
            .then(response => {
                if (response.data.code === 0) {
                    this.users = [];
                    this.users = response.data.data;
                } else {
                    this.users = [];
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        changeUserRole(userId) {
        // 更改管理员权限状态
            axios.post('http://localhost:8888/api/users/changeUserRole', {
                userId: userId,
                operatorId: operatorId
            })
            .then(response => {
                if (response.data.code === 0) {
                    console.log(response.data.message);
                    this.queryUser()
                } else {
                    console.log(response.data.message);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        deleteUser(userId){
            // 删除用户
                axios.post('http://localhost:8888/api/users/deleteUser', {
                userId:userId,
                operatorId: operatorId
            })
            .then(response => {
                if (response.data.code === 0) {
                    console.log("删除用户成功");
                    this.queryUser()
                } else {
                    console.log(response.data.message);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        updateUserStatus(userId){
         // 用户状态改变
            axios.post('http://localhost:8888/api/users/updateUserStatus', {
                userId:userId,
                operatorId: operatorId
            })
            .then(response => {
                if (response.data.code === 0) {
                    console.log("修改用户状态成功");
                    this.queryUser()
                } else {
                    console.log(response.data.message);
                }
            })
            .catch(error => {
                console.log(error);
            });
        }
        
    }
   
    });
        </script>
    <!-- <script src="/api/UserManage.js"></> -->
</body>
</html>
